<!--
  区域分配车位管理页面
  User: YanZengBao
  Date: 2020-02-19
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>车位表管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="车位表后台服务中心"/>
    <meta content="" name="GaoXiang"/>
   <!-- <th:block th:replace="body/head-page :: dva_head_page"/>-->
</head>

<body class="page-content-white  fade-in-up">

<!-- BEGIN CONTAINER -->
<div class="page-container">


    <!-- BEGIN PAGE TOOLS-->
    <!--查询条件示例 使用时取消hide样式-->
    <div class="portlet light hide">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-paper-plane font-green-haze"></i>
                <span class="caption-subject bold font-green-haze uppercase">搜索</span>
                <span class="caption-helper">点击右侧搜索按钮开始检索</span>
            </div>
            <div class="tools">
                <a href="javascript:void(0);" class="collapse" data-original-title="收起" title="收起"></a>
                <a href="javascript:void(0);" class="fullscreen" data-original-title="全屏" title="全屏"></a>
            </div>
        </div>
        <div class="portlet-body hide">
            <div class="form-inline" role="form" id="table-param">

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="parkName" value="" placeholder="车场名称">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="parkinglotCode" value="" placeholder="车位编号">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <select class="form-control" name="parkinglotStatus">
                        <option value="">请选择车位状态</option>
                        <option value="0">未使用</option>
                        <option value="1">使用中</option>
                    </select>
                    <div class="form-control-focus"></div>
                </div>

                <button class="btn btn-success btn-tools-search"><i class="icon-magnifier"></i> 搜索</button>
                <button class="btn btn-danger btn-tools-reset" data-url-param="&current=1&size=10"><i class="icon-reload"></i> 重置
                </button>
            </div>
        </div>
    </div>

    <!-- BEGIN PAGE TABLE-->
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-speech  font-blue-hoki"></i>
                <span class="caption-subject font-blue-hoki">车位表数据表</span>
                <!-- 隐藏域 设置区域ID-->
                <input type="hidden" class="form-control" id="areaId" th:value="${areaId}">
            </div>
        </div>
        <div class="table-toolbar">
            <div class="row">
                <div class="col-md-6">
                    <div class="btn-group">
                        <a href="javascript:quickBind();" class="btn blue ">
                            快速绑定车位 <i class="fa fa-plus"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="portlet-body table-responsive">
            <div class="table-scrollable">
                <table  class="table table-bordered table-hover"
                       id="table_1">
                    <thead>
                    <tr>
                        <th class="table-checkbox">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-all" title="全选"><span></span>
                            </label>
                        </th>
                        <th>车场名称</th>
                        <th>车位编号</th>
                        <th>车位状态</th>
                        <th>车位类型</th>
                        <th>是否绑定分区</th>
                        <th>区域名称</th>
                        <th>地锁标识</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="data,iterStat : ${parkinglotList}">
                        <td class="center">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-child"
                                       title="选择此条数据" th:value="${data.id}"><span></span>
                            </label>
                        </td>
                                    <td th:title="${data.parkName}" th:text="${#strings.abbreviate(data.parkName,32)}"></td>
                                    <td th:title="${data['parkinglotCode']}" th:text="${#strings.abbreviate(data['parkinglotCode'],32)}"></td>
                                    <td th:title="${data['parkinglotStatus']}" th:text="${data['parkinglotStatus'] == 1 ? '使用中' :'未使用'}"></td>

                                    <td th:title="${data['parkinglotType']}" th:if="${data['parkinglotType'] == 1}">地锁车位</td>
                                    <td th:title="${data['parkinglotType']}" th:if="${data['parkinglotType'] == 2}">地磁车位</td>
                                    <td th:title="${data['parkinglotType']}" th:if="${data['parkinglotType'] == 3}">普通车位</td>

                                    <td th:title="${data['status']}" th:text="${data['status'] == 0 ? '未绑定' :'已绑定'}"></td>
                                    <td th:title="${data.areaName}" th:text="${#strings.abbreviate(data.areaName,32)}"></td>
                                    <td th:title="${data['lockNumber']}" th:text="${#strings.abbreviate(data['lockNumber'],32)}"></td>
                        <td>
                            <div class="btn-group btn-group-xs btn-group-solid">
                                <button th:if="${data.status == 0}" th:data-id="${data['id']}" class="btn btn-success btn-module-bind"> 绑定车位 </button>
                                <button th:if="${data.status == 1}" th:data-id="${data['id']}" class="btn btn-danger btn-module-untying"> 解绑车位 </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>

    $(document).ready(function () {
        //初始化绑定操作
        initChoose();
    });

    //绑定点击事件
    $(".btn-module-bind").click(function(){
        try {
            var id = $(this).data("id");
            console.log(id);
        } catch (e) {
            layer.msg("执行失败！请在编辑标签上增加 data-id 列存放数据id！", {icon: 2,time:1000});
        }
        bind(id);
    });

    //单个绑定
    function bind(id) {
        let areaId = $("#areaId").val();
        layer.confirm("确定要绑定该车位吗？",function() {
            tools.post("/parkArea/bindParkinglot", {"id":id,"areaId":areaId}, function (data) {
                if(data.success){
                    layer.msg(data.message, {icon: 1,time:2000},function(){
                        //跳转到第一页
                        //toPage(1);
                        window.location.reload();
                    });
                }else{
                    tools.errorTip(data.code,data.message);
                }
            });
        });
    }

    //单个解绑点击事件
    $(".btn-module-untying").click(function () {
        try {
            var id = $(this).data("id");
            console.log(id);
        } catch (e) {
            layer.msg("执行失败！请在编辑标签上增加 data-id 列存放数据id！", {icon: 2,time:1000});
        }
        untying(id);
    });

    //单个解绑
    function untying(id) {
        layer.confirm("确定要解绑该车位吗？",function() {
            tools.post("/parkinglot/untyingParkinglot", {"id":id}, function (data) {
                if(data.success){
                    layer.msg(data.message, {icon: 1,time:2000},function(){
                        //跳转到第一页
                        //toPage(1);
                        window.location.reload();
                    });
                }else{
                    tools.errorTip(data.code,data.message);
                }
            });
        });
    }


    //快速绑定车位
    function quickBind(){
        let areaId = $("#areaId").val();
        let ids = getIds($('#table_1').find(".checkbox-child:checked"));
        if(ids.length === 0 ){
            layer.msg("请至少选择一个车位绑定", {icon: 2, time: 1000});
            return;
        }
        layer.confirm("确定绑定选中信息么？",function(){
            tools.post("/parkArea/bindParkinglotBatch",{"ids":ids.join(","),"areaId":areaId},function(data){
                if(data.success){
                    layer.msg(data.message, {icon: 1,time:1000},function(){
                        window.location.reload();
                    });
                }else{
                    tools.errorTip(data.code,data.message);
                }
            });
        });
    }



    /**
     * 初始化绑定操作
     */
    function initChoose() {
        let table = $('#table_1');
        //全选
        $(".checkbox-all").click(function () {
            let group = $(this);
            table.find(".checkbox-child").each(function () {
                let isCheck = group.is(":checked");
                $(this).prop('checked', isCheck);
                isCheck ? $(this).parents('tr').addClass("active") : $(this).parents('tr').removeClass("active");
            });
        });

        //选择一行
        $(".checkbox-child").click(function () {
            let isCheck = $(this).is(":checked");
            isCheck ? $(this).parents('tr').addClass("active") : $(this).parents('tr').removeClass("active");
        });

        //点击每一行空白处 标记 table-notr class 的表格不加载此点击事件
        if(!table.hasClass("table-notr")){
            table.find("tbody tr").click(function (e) {
                let targetElement = e.target.nodeName;
                //如果是checkbook标签 则不执行以下内容（和自身点击事件冲突）
                if (!(targetElement === "SPAN\nINPUT")) {
                    let checkbox = $(this).find(".checkbox-child").eq(0);
                    let isCheck = checkbox.is(":checked");
                    if (isCheck) {
                        checkbox.prop('checked', false);
                        $(this).removeClass("active");
                    } else {
                        checkbox.prop('checked', true);
                        $(this).addClass("active");
                    }
                }
            });
        }
    }

</script>
</body>
</html>